:root {
    --page-ratio: 16 / 9;
    --mobile-zoom-width: 200vw;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

body {
    font-family: Georgia, "Times New Roman", serif;
}

/* One illustrated spread per article. */
.page {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
}

.page.active {
    display: flex;
}

/* Keep every spread at 16:9 without cropping or distortion. */
.stage {
    position: relative;
    width: min(100vw, calc(100dvh * 16 / 9));
    aspect-ratio: var(--page-ratio);
    max-width: 100vw;
    max-height: 100dvh;
    overflow: hidden;
    background: #000;
    flex: 0 0 auto;
}

@supports not (height: 100dvh) {
    .stage {
        width: min(100vw, calc(100vh * 16 / 9));
        max-height: 100vh;
    }
}

.page-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Desktop wrapper around story art. It changes behavior only on phones. */
.story-stage-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Invisible navigation regions over the baked-in navigation labels. */
.hotspot {
    position: absolute;
    z-index: 20;
    display: block;
    background: transparent;
    border: 0;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}

.hotspot.prev {
    left: 0.7%;
    bottom: 0.4%;
    width: 12.0%;
    height: 6.5%;
}

.hotspot.start {
    left: 45.8%;
    bottom: 0.4%;
    width: 4.0%;
    height: 6.5%;
}

.hotspot.home {
    left: 50.4%;
    bottom: 0.4%;
    width: 4.4%;
    height: 6.5%;
}

.hotspot.next {
    right: 0.7%;
    bottom: 0.4%;
    width: 12.0%;
    height: 6.5%;
}

.hotspot:focus-visible,
.book-link:focus-visible,
.story-link:focus-visible {
    outline: 2px solid rgba(255,255,255,.75);
    outline-offset: 2px;
}

/* Hidden on desktop. */
.mobile-controls,
.mobile-swipe-cue {
    display: none;
}

/* =========================================================
   END SPREAD — HTML TEXT ON BLANK PAPER BACKGROUND
   ========================================================= */
.text-stage {
    container-type: inline-size;
}

.end-left {
    position: absolute;
    z-index: 10;
    left: 3.9%;
    top: 5.4%;
    width: 41.6%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.44cqw;
    line-height: 1.18;
    font-weight: 600;
    color: #20170f;
    text-align: left;
}

.end-left p {
    margin: 0 0 1.25em 0;
}

.end-left .short-gap {
    margin-top: .15em;
    margin-bottom: 1.35em;
}

.end-right {
    position: absolute;
    z-index: 10;
    left: 55.2%;
    top: 15.4%;
    width: 38.8%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.38cqw;
    line-height: 1.17;
    color: #20170f;
    text-align: center;
}

.end-right p {
    margin: 0;
}

.promo-heading {
    margin-bottom: 1.35em !important;
}

.book-group {
    margin-bottom: 1.7em;
}

.group-title {
    font-weight: 700;
}

.subgroup {
    margin-top: 1.55em;
}

.story-link,
.book-link {
    color: inherit;
    text-decoration: none;
}

.story-link {
    font-weight: 700;
}

.book-link {
    display: block;
    width: fit-content;
    margin: .08em auto;
}

.story-link:hover,
.book-link:hover {
    text-decoration: underline;
    text-underline-offset: .16em;
}

.end-copyright {
    position: absolute;
    z-index: 10;
    left: 67.6%;
    bottom: 1.55%;
    transform: translateX(-50%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .70cqw;
    font-weight: 400;
    color: #31271e;
    white-space: nowrap;
}

@supports not (font-size: 1cqw) {
    .end-left {
        font-size: clamp(13px, 1.44vw, 28px);
    }

    .end-right {
        font-size: clamp(13px, 1.38vw, 27px);
    }

    .end-copyright {
        font-size: clamp(8px, .70vw, 14px);
    }
}

/* =========================================================
   SERIES TITLE SPREAD
   ========================================================= */
.series-title-stage {
    container-type: inline-size;
}

/* Fallback styling only. Normally the reader uses Title.jpg. */
.series-title-block {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #130d07;
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    pointer-events: none;
}

.series-title-block h1 {
    margin: 0;
    font-size: 6.2cqw;
    line-height: .95;
    font-weight: 700;
    letter-spacing: .015em;
}

.series-title-block .series-author {
    margin: 2.2cqw 0 0;
    font-size: 1.55cqw;
    line-height: 1;
    font-weight: 400;
}

.series-title-copyright {
    left: 50%;
}

@supports not (font-size: 1cqw) {
    .series-title-block h1 {
        font-size: clamp(46px, 6.2vw, 118px);
    }

    .series-title-block .series-author {
        font-size: clamp(16px, 1.55vw, 30px);
    }
}

/* =========================================================
   OPENING CONTENTS / VOLUME TITLE SPREAD
   ========================================================= */
.contents-stage {
    container-type: inline-size;
}

.intro-contents {
    position: absolute;
    z-index: 10;
    left: 10.6%;
    top: 13.5%;
    width: 34.8%;
    height: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #130d07;
    font-family: Georgia, "Times New Roman", serif;
}

.intro-contents h1 {
    margin: 0 0 1.35em;
    text-align: center;
    font-size: 2cqw;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;
}

.volume-list {
    display: flex;
    flex-direction: column;
    gap: .35cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.volume-list li {
    text-align: left;
    white-space: nowrap;
    font-size: 1.08cqw;
    line-height: 1.25;
}

.volume-link {
    color: inherit;
    text-decoration: none;
    text-shadow: 0 0 .01px currentColor;
}

.volume-link.current {
    font-weight: 700;
}

.volume-link:hover,
.volume-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: .16em;
}

.volume-link.coming {
    cursor: default;
}

.volume-link.coming:hover {
    text-decoration: none;
}

.volume-label {
    font-weight: 400;
}

.volume-title {
    font-weight: 700;
}

.coming-text {
    color: rgba(19, 13, 7, .68);
    font-size: .92em;
    font-style: italic;
    font-weight: 400;
}

.intro-current-volume {
    position: absolute;
    z-index: 10;
    left: 60.2%;
    top: 32.8%;
    width: 27%;
    text-align: center;
    color: #130d07;
    font-family: Georgia, "Times New Roman", serif;
}

.intro-current-volume .number {
    margin: 0 0 1em;
    font-size: 1.8cqw;
    font-weight: 700;
}

.intro-current-volume .title {
    margin: 0;
    font-size: 3.45cqw;
    line-height: 1;
    font-weight: 700;
}

.intro-current-volume a {
    color: inherit;
    text-decoration: none;
}

.intro-current-volume a:hover .title,
.intro-current-volume a:focus-visible .title {
    text-decoration: underline;
    text-underline-offset: .12em;
}

.intro-copyright {
    position: absolute;
    z-index: 10;
    left: 67.1%;
    bottom: 2.6%;
    transform: translateX(-50%);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .72cqw;
    color: #130d07;
    white-space: nowrap;
}

.volume-link:focus-visible,
.intro-current-volume a:focus-visible {
    outline: 2px solid rgba(19, 13, 7, .72);
    outline-offset: 4px;
    border-radius: 2px;
}

@supports not (font-size: 1cqw) {
    .intro-contents h1 {
        font-size: clamp(20px, 2vw, 38px);
    }

    .volume-list li {
        font-size: clamp(11px, 1.08vw, 20px);
    }

    .intro-current-volume .number {
        font-size: clamp(18px, 1.8vw, 34px);
    }

    .intro-current-volume .title {
        font-size: clamp(34px, 3.45vw, 66px);
    }

    .intro-copyright {
        font-size: clamp(8px, .72vw, 13px);
    }
}

/* =========================================================
   PHONE READER

   Portrait phones open story spreads enlarged on the left.
   The reader can swipe horizontally to inspect the right side,
   or tap View full spread to see the original composition.
   Large visible navigation buttons replace the tiny baked-in
   hotspots on phones.
   ========================================================= */
@media (max-width: 700px) and (orientation: portrait) {
    .page.mobile-reader.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #000;
    }

    /* The normal image hotspots are intentionally disabled on phones;
       the visible buttons below become the primary navigation. */
    .page.mobile-reader .hotspot {
        display: none;
    }

    .page.mobile-reader > .stage {
        width: 100vw;
        max-width: 100vw;
        max-height: none;
        flex: 0 0 auto;
    }

    .page.mobile-reader .story-stage-viewport {
        position: relative;
        width: 100vw;
        height: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background: #000;
        /* Keep native pinch-to-zoom and two-dimensional panning available. */
        touch-action: auto;
    }

    .page.mobile-reader .story-stage-viewport::-webkit-scrollbar {
        display: none;
    }

    /* Default phone mode: the left side is enlarged and fills the screen. */
    .page.mobile-reader.story-page.mobile-zoomed-spread .stage {
        width: var(--mobile-zoom-width);
        max-width: none;
        max-height: none;
        flex: 0 0 var(--mobile-zoom-width);
    }

    /* Optional whole-composition mode. */
    .page.mobile-reader.story-page.mobile-full-spread .stage {
        width: 100vw;
        max-width: 100vw;
        max-height: none;
        flex: 0 0 100vw;
    }

    .mobile-controls {
        display: block;
        width: 100vw;
        flex: 0 0 auto;
        padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
        background: #000;
        font-family: Arial, Helvetica, sans-serif;
    }

    .mobile-primary-nav {
        display: grid;
        gap: 8px;
        width: 100%;
    }

    .mobile-controls-standard .mobile-primary-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mobile-controls-story .mobile-primary-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
    }

    .mobile-secondary-nav {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 8px;
    }

    .mobile-zoom-help {
        margin: 8px 0 0;
        color: rgba(255,255,255,.82);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 400;
        text-align: center;
    }

    .page.mobile-reader.story-page.mobile-full-spread .mobile-zoom-help {
        display: none;
    }

    .mobile-control {
        appearance: none;
        -webkit-appearance: none;
        min-width: 0;
        min-height: 50px;
        margin: 0;
        padding: 9px 8px;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 8px;
        background: #151515;
        color: #fff;
        font: inherit;
        font-size: 14px;
        line-height: 1.15;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
        touch-action: manipulation;
    }

    .mobile-control:active {
        background: #292929;
    }

    .mobile-control:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    .mobile-small-control {
        width: min(34vw, 150px);
        min-height: 44px;
        padding: 7px 10px;
        font-size: 13px;
        font-weight: 600;
        background: #0d0d0d;
        color: rgba(255,255,255,.88);
    }

    .mobile-swipe-cue {
        position: absolute;
        z-index: 40;
        right: 12px;
        top: 43%;
        display: none;
        align-items: center;
        gap: 7px;
        padding: 7px 10px 7px 11px;
        border: 1px solid rgba(255,255,255,.32);
        border-radius: 999px;
        background: rgba(0,0,0,.58);
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .02em;
        pointer-events: none;
        user-select: none;
    }

    .page.mobile-reader.story-page.mobile-zoomed-spread:not(.mobile-hint-dismissed) .mobile-swipe-cue {
        display: flex;
    }

    .mobile-swipe-arrow {
        display: inline-block;
        font-size: 22px;
        line-height: .8;
        animation: mobileSwipeNudge 900ms ease-in-out infinite alternate;
    }

    @keyframes mobileSwipeNudge {
        from {
            transform: translateX(0);
            opacity: .72;
        }
        to {
            transform: translateX(7px);
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-swipe-arrow {
            animation: none;
        }
    }
}